<template>
  <div class="new">
    <div class="header">
      <a>新碟上架</a>
      <span class="more">
        <router-link to="/home/album">更多></router-link>
        <i>&nbsp;</i>
      </span>
    </div>
    <div class="body">
      <div class="inner">
        <div class="roll">
          <ul class="roller-flag" ref="roll">
            <li v-for="(img, index) in imgList" :key="index">
              <img :src="img.blurPicUrl" />
              <router-link
                :to="{ path: '/album', query: { id: `${img.id}` } }"
              ></router-link>
              <p class="over" :title="img.name">
                <router-link
                  :to="{ path: '/album', query: { id: `${img.id}` } }"
                  >{{ img.name }}</router-link
                >
              </p>
              <p class="over" :title="img.artist.name">
                <router-link
                  :to="{ path: '/artist/song', query: { id: img.artist.id } }"
                  class="name over underline"
                  >{{ img.artist.name }}</router-link
                >
              </p>
              <a class="play"></a>
            </li>
          </ul>
        </div>

        <a class="pre" @click="pre"></a>
        <a class="nex" @click="nex"></a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "new",
  data() {
    return {
      limit: 10,
      firstIndex: 1,
      finalIndex: 5,
      timer: "",
    };
  },
  methods: {
    //向后翻页
    nex() {
      if (this.timer != "") return;
      this.firstIndex++;
      if (this.firstIndex > this.limit) this.firstIndex = 1;
      this.finalIndex++;
      if (this.finalIndex >= this.limit - 1) this.finalIndex = -1;
      var roll = this.$refs.roll;
      roll.style.transition = "left 1s";
      roll.style.left = roll.offsetLeft - 145 + "px";
      this.timer = setInterval(() => {
        roll.style.transition = "none";
        roll.style.left = roll.offsetLeft + 113 + "px";
        for (let i = 1; i <= 5; i++) this.imgList[i] = this.imgList[i + 1];
        this.$forceUpdate();
        clearTimeout(this.timer);
        this.timer = "";
      }, 1200);
    },
    //向前翻页
    pre() {
      if (this.timer != "") return;
      this.firstIndex--;
      if (this.firstIndex <= 0) this.firstIndex = this.limit;
      this.finalIndex--;
      if (this.finalIndex < -1) this.finalIndex = this.limit - 2;
      var roll = this.$refs.roll;
      roll.style.transition = "left 1s";
      roll.style.left = roll.offsetLeft + 113 + "px";
      this.timer = setInterval(() => {
        roll.style.transition = "none";
        roll.style.left = roll.offsetLeft - 145 + "px";
        for (let i = 5; i >= 1; i--) this.imgList[i] = this.imgList[i - 1];
        this.$forceUpdate();
        clearTimeout(this.timer);
        this.timer = "";
      }, 1200);
    },
  },
  watch: {
    firstIndex() {
      let last = this.firstIndex - 1;
      this.imgList[0] = this.AllList[last];
      this.$forceUpdate();
    },
    finalIndex() {
      let next = this.finalIndex + 1;
      this.imgList[6] = this.AllList[next];
      this.$forceUpdate();
    },
  },
  computed: {
    ...mapState({
      AllList: (state) => state.home.newAlbum,
    }),
    imgList() {
      return this.AllList.slice(0, 7);
    },
  },
  mounted() {
    //获取新碟上架
    this.$store.dispatch("getNew");
    // this.$store.dispatch('getAlbumAll',{limit:1,area:'ALL',offset:0});
  },
};
</script>

<style scoped lang = "less">
.new {
  width: 689px;
  position: relative;

  .header {
    width: 100%;
    height: 33px;
    padding: 0 10px 0 34px;
    /* background: url('./images/index.png') no-repeat -225px -156px; */
    border-bottom: 2px solid #180cc1;

    a {
      float: left;
      font-size: 20px;
      font-weight: normal;
      line-height: 28px;
      color: #333;
      &:hover {
        cursor: pointer;
      }
    }

    .more {
      width: 40px;
      height: 16px;
      margin: 9px;
      float: right;

      a {
        font-size: 12px;
        color: #666;
        line-height: 15px;

        &:hover {
          cursor: pointer;
          text-decoration: underline;
        }
      }

      i {
        float: right;
        display: block;
        /* background: url('./images/index.png') no-repeat 0 -240px; */
        font-style: normal;
        text-align: left;
        font-size: inherit;
        width: 12px;
        height: 12px;
        margin-left: 4px;
        margin-top: 1px;
      }
    }
  }

  .body {
    width: 100%;
    height: 188px;
    border: 1px solid #d3d3d3;
    margin: 20px 0 37px;
    position: relative;
    color: #333;

    .inner {
      padding-left: 16px;
      height: 186px;
      background: #f5f5f5;
      .roll {
        width: 645px;
        height: 180px;
        overflow: hidden;
        float: left;

        .roller-flag {
          width: 903px;
          height: 150px;
          margin-top: 28px;
          float: left;
          position: relative;
          left: -129px;
          top: 0;
          transition: left 1s;
          li {
            float: left;
            width: 118px;
            height: 150px;
            margin-left: 11px;
            position: relative;

            img {
              width: 100px;
              height: 100px;
            }

            > a {
              width: 118px;
              height: 100px;
              position: absolute;
              top: 0;
              left: 0;
              background: url("./images/coverall.png") no-repeat 0 -570px;

              &:hover {
                cursor: pointer;
              }
            }

            p {
              text-align: left;
              font-size: 12px;
              color: #333;
              font-family: Arial, Helvetica, sans-serif;
              -webkit-text-size-adjust: none;
              display: block;
              margin-block-start: 1px;
              margin-block-end: 1px;

              &:hover {
                cursor: pointer;
                text-decoration: underline;
              }
              a {
                color: #333;
              }
            }

            .play {
              position: absolute;
              left: 80px;
              top: 80px;
              width: 22px;
              height: 22px;
              background: url("./images/iconall.png") no-repeat 0 -60px;
              display: none;
            }

            &:hover .play {
              display: block;
            }
          }
        }
      }

      .pre,
      .nex {
        width: 17px;
        height: 17px;
        position: absolute;
        top: 75px;
        background: url("./images/index.png") no-repeat;

        &:hover {
          cursor: pointer;
        }
      }

      .pre {
        left: 3px;
        background-position: -260px -75px;
      }

      .nex {
        right: 3px;
        background-position: -300px -75px;
      }
    }
  }

  @keyframes moveLeft {
    from {
      left: 0px;
    }
    to {
      left: -258px;
    }
  }
}
</style>